<template>
  <div class="three-canvas" ref="threeTarget"></div>
</template>

<script>
  import { ThreeEngine } from '../components/js/TEngine'
  import { allBaseObject } from '../components/js/TBaseObject.js'
  import { AmbientLight, PointLight } from "three"
  import { allHelper } from '../components/js/THelper'

  /**
   * 光线
   */
  export const allLights = []

  // 添加环境光（自然光），设置自然光的颜色，设置自然光的强度（0 最暗， 1 最强）
  export const ambientLight = new AmbientLight('rgb(255,255,255)', 0.8)
  // 点光源
  export const pointLight = new PointLight(
    'rgb(255,255,255)',
    0.5,
    600,
    0.2
  )
  pointLight.position.set(0, 100, 200)  // 设置点光源位置 (x,y,z)

  allLights.push(pointLight)  // 将点光源添加到光源列表抛出

  allLights.push(ambientLight)

  export default {
    name: 'HelloWorld',
    data() {
      return {
        ThreeEngine: null,
      };
    },
    mounted() {
      this.ThreeEngine = new ThreeEngine(this.$refs.threeTarget)
      this.ThreeEngine.addObject(...allBaseObject)  // 添加基础模型
      this.ThreeEngine.addObject(...allLights)  // 添加光线
      this.ThreeEngine.addObject(...allHelper)  // 添加光线
    }
  }
</script>

<style scoped>
.three-canvas {
  width: 100vw;
  height: calc(100vh - 50px);
  overflow: hidden;
  background-color: #d6eaff;
}
</style>
